<template>
	<view>
    <!-- 使用自定义搜索组件 -->
    <my-search @click="gotoSearch"></my-search>
    
		<view class="scroll-view-container">
		  <!-- 左侧滚动的区域 -->
      <scroll-view  class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
        <block v-for="(item, i) in cateList" :key="i">
          <!-- 当i的值 也就是索引的值   等于active时候 就让让高亮样式展示 否则为空 -->
          <view :class="['left-scroll-view-item', i === active ? 'active' : '' ]" @click="activeChanged(i)">{{item.cat_name}}</view>
        </block>
      </scroll-view>
      
      <!-- 右侧滚动的区域 -->
      <scroll-view class="right-scroll-view"  scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop">
        <view class="cate-lv2" v-for="(item2, i2 ) in cateLevel2" :key="i2">
          <!-- 二级分类的标题 -->
          <view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
          
          <!-- 动态渲染三级分类数据  也就是图片 -->
          <view class="cate-lv3-list">
            <!-- 三级分类的item项 -->
            <view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)">
              <!-- 图片 -->
              <!-- <image :src="item3.cat_icon"></image> -->
              <image src="../../static/my-icons/icon2.png" mode=""></image>
              <!-- 文本 -->
              <text>{{item3.cat_name}}</text>
            </view>
          </view>
          
        </view>
      </scroll-view>
      
		</view>
	</view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
    mixins: [badgeMix],
		data() {
			return {
        // 因为自定义的my-search 组件高度为50 所以需要重新计算
        // 声明的窗口可用高度  = 屏幕高度 - navigationBar高度 - tabBar 高度
				wh: 0,
        // 获取分类数据列表 默认为空数组
        cateList: [],
        // 当前选中项的索引，默认让第一项被选中
        active: 0,
        // 获取二级分类数据列表 默认为空数组
        cateLevel2: [],
        // 滚动条距离顶部的距离
        scrollTop: 0
			};
		},
    onLoad() {
      const sysInfo = uni.getSystemInfoSync()
      // console.log(sysInfo)   //就是uni-app  官网API里面的设备API  获取到系统信息
      // 为wh 窗口可用高度赋值
      this.wh = sysInfo.windowHeight - 50
      
      // 在页面初始化时候 调用获取分类数据列表的方法
      this.getCateList()
    },
    
    methods:{
      // 获取分类数据列表的方法
      async getCateList() {
        const { data: res } = await uni.$http.get('/api/public/v1/categories')
        if(res.meta.status !==200) return uni.$showMsg()
        this.cateList = res.message
        
        // 为二级分类数据赋值 因为请求到的包括二级分类数据
        this.cateLevel2 = res.message[0].children
      },
      
      // 选中分类数据的点击处理函数
      activeChanged(i) {
        // 意思就是如果当前激活的索引值 等于active时  就让他激活
        this.active = i
        // 为二级分类重新赋值 
        this.cateLevel2 = this.cateList[i].children
        
        // 让scrollTop 的值 在0 - 1之间切换     1px像素差用户是体验不到的
        this.scrollTop = this.scrollTop === 0 ? 1 : 0 //值等于0 时候就重新赋值1 
        // 可以简化为如下的代码：
        // this.scrollTop = this.scrollTop ? 0 : 1
      },
      
      // 三级分类的点击事件
      gotoGoodsList(item3) {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id
        })
      },
      
      // my-search 的搜索框点击事件
      gotoSearch() {
        // 点击跳转到search页面
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }
    }
	}
</script>

<style lang="scss">
 .scroll-view-container{
   display: flex;
   .left-scroll-view {
      width: 120px;
     }
     .left-scroll-view-item{
       line-height: 60px;
       background-color: #f7f7f7;
       text-align: center;
       font-size: 12px;
       
       // 激活时候的样式   就是高亮效果
       &.active {
         background-color: #ffffff;
         position: relative;
         // 高亮时候左侧的红色线
         &::before {
           content: '';
           display: block;
           width: 3px;
           height: 30px;
           background-color: #c00000;
           position: absolute;
           left: 0;
           top: 50%;
           transform: translateY(-50%);
         }
       }
      }
      // 右侧滚动区域的样式
      .cate-lv2-title {
        font-size: 12px;
        font-weight: bold; //粗字体
        text-align: center;
        padding: 15px 0;
      }
      
      // 三级分类样式数据
      .cate-lv3-list{
        display: flex;
        flex-wrap: wrap;
        .cate-lv3-item {
          width: 33.33%;
          display: flex;
          flex-direction: column; //垂直显示
          align-items: center; //在侧轴居中排列
          margin-bottom: 10px; 
        }
        image {
          width: 60px;
          height: 60px;
        }
        text {
          font-size: 12px;
        }
      }
   }
 
</style>
